<template>
  <view class="loginview">
    <view
      class="login"
      style="
        background: url('/static/logo1.png') no-repeat center center;
        width: 100%;
        height: 300rpx;
        background-size: 200rpx;
      "
    ></view>
    <view class="title">获取您的昵称、头像</view>
    <view class="remind">您可以选择不同的昵称、头像登录 </view>
    <view class="infolist">
      <view class="infoitem" v-for="(item, i) in infomsg" :key="i">
        <img :src="item.url" alt="" class="img" />
        <view class="infomsg">
          <view class="info_name">{{ item.name }}</view>
          <view class="info_tip">微信昵称头像</view>
        </view>
      </view>
      <view class="infoitem">
        <img src="../../static/add.png" alt="" class="img" />
        <view class="info_tip1">新建昵称头像</view>
      </view>
    </view>
    <view class="footer">
      <view class="allow">允许</view>
      <view class="refuse" @click="gologin">拒绝</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infomsg: [
        {
          name: "陈小姐",
          url: "https://img0.baidu.com/it/u=2160844802,3757565957&fm=253&fmt=auto&app=138&f=JPEG",
        },
        {
          name: "李先生",
          url: "https://img1.baidu.com/it/u=3421619512,636269871&fm=253&fmt=auto&app=138&f=JPEG",
        },
      ],
    };
  },
  methods: {
    gologin() {
      uni.navigateTo({
        url: "/packageB/login/login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.loginview {
  font-family: "Poppins";
  width: 100%;
  height: 100vh;
}

.title {
  padding: 0rpx 50rpx;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 10rpx;
}

.remind {
  font-size: 28rpx;
  padding: 0rpx 50rpx;
  color: #8b8b8d;
  margin-bottom: 20rpx;
}

.infolist {
  padding: 0rpx 70rpx;

  .infoitem {
    width: 100%;
    height: 110rpx;
    border-bottom: 1px solid #d8d8d8;
    padding: 0 10rpx;
    display: flex;
    align-items: center;

    .img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .infomsg {
      .info_name {
        font-size: 28rpx;
        letter-spacing: 1px;
        color: #000000;
      }

      .info_tip {
        font-size: 28rpx;
        color: #8b8b8d;
      }
    }

    .info_tip1 {
      font-size: 30rpx;
      color: #000;
    }
  }
}

.footer {
  position: absolute;
  left: 50%;
  bottom: 60rpx;
  transform: translate(-50%);

  .allow {
    width: 200rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 10rpx;
    background: #05c160;
    color: #fff;
    margin-bottom: 20rpx;
    font-size: 26rpx;
  }

  .refuse {
    width: 200rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 10rpx;
    background: #f2f2f2;
    font-size: 26rpx;
  }
}
</style>